<template>
  <div class="vehicle">
    <Manage>
      <template #upCard>
        <el-form label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="车辆类型">
                <el-select v-model="searchContent.truckTypeId" style="width:100%" clearable>
                  <el-option
                    v-for="item in TruckTypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车牌号码">
                <el-input v-model="searchContent.licensePlate" placeholder="请输入车牌号码" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template #midCard>
        <TabChange :tabs="setMap.isUse" :status-count="statusCount" @changeItem="changeItem" />
      </template>
      <template #downCard>
        <el-button type="primary" style="margin-bottom:20px" @click="handleDialog">新增车辆</el-button>
        <el-table v-loading="loading" :data="truckList" stripe :header-cell-style="{background:'#f8faff',color:'#818693'}">
          <el-table-column type="index" label="序号" />
          <el-table-column prop="licensePlate" label="车牌号码" />
          <el-table-column prop="truckTypeName" label="车辆类型" />
          <el-table-column prop="driverNum" label="司机数量" />
          <el-table-column prop="workStatus" label="车辆状态">
            <template #default="{row}">
              <div :class="row.workStatus?'red-status':'green-status'">{{ row.workStatus?'停用':'可用' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="deviceGpsId" label="GPS设备ID" />
          <el-table-column prop="allowableLoad" label="实载重量(T)" />
          <el-table-column prop="allowableVolume" label="实载重量(方)" />
          <el-table-column label="操作" align="center" width="200px">
            <template #default="{row}">
              <a href="javascript:void(0);" style="color:#419eff;" @click="toDetail(row.id)">查看详情</a>
              <div class="line" />
              <a
                href="javascript:void(0);"
                :style="row.workStatus?'color:#f56c6c;':'color:#419eff;'"
                @click="isEnable(row)"
              >{{ row.workStatus?'停用':'启用' }}</a>
              <div class="line" />
              <a href="javascript:void(0);" style="color:#419eff;" @click="withDriver(row)">配置司机</a>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            :current-page="page.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </template>
    </Manage>
    <!-- 弹层 -->
    <el-dialog title="新增车辆" :visible.sync="showDialog" @close="close">
      <el-form ref="truckForm" label-width="100px" :model="truckForm" :rules="rules">
        <el-form-item label="车辆类型" prop="truckTypeId">
          <el-select v-model="truckForm.truckTypeId" style="width:100%">
            <el-option
              v-for="item in TruckTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码" prop="licensePlate">
          <el-input v-model.number="truckForm.licensePlate" placeholder="请输入车牌号码" />
        </el-form-item>
        <el-form-item label="GPS设备ID" prop="deviceGpsId">
          <el-input v-model.number="truckForm.deviceGpsId" placeholder="请输入GPS设备ID" />
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="submit">确 定</el-button>
          <el-button @click="close">取 消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 配置司机 -->
    <el-dialog title="配置司机" :visible.sync="showDriver">
      <div style="background-color:#fbfafa;width:584;height:131px;padding:21px 51px">
        <div class="truckInfo">
          <el-col :span="12">车牌号：{{ driverInfo.licensePlate }}</el-col>
          <el-col :span="12">车型：{{ driverInfo.truckTypeName }}</el-col>
          <el-col :span="12">车辆状态：<span class="statusGreen">可用</span></el-col>
          <el-col :span="12">实载重量：{{ driverInfo.allowableLoad }}</el-col>
          <el-col :span="12">实载体积：{{ driverInfo.allowableVolume }}</el-col>
        </div>
      </div>
      <el-form style="margin:12px 0">
        <el-form-item label="配置司机">
          <el-select v-model="driverSelect" multiple style="width:50%">
            <el-option v-for="item in driverList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableList"
        stripe
        :header-cell-style="{background:'#f8faff',color:'#818693'}"
      >
        <template slot="empty">
          <img src="@/assets/img/empty.png" alt="">
          <p>这里空空如也</p>
        </template>
        <el-table-column type="index" label="序号" />
        <el-table-column prop="name" label="司机名称" />
        <el-table-column label="操作">
          <template #default="{row}">
            <a href="javascript:void(0);" style="color:#419eff;" @click="driverView(row.id)">查看</a>
            <div class="line" />
            <a href="javascript:void(0);" style="color:#f56c6c;">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" style="margin-top:15px">
        <el-button type="primary">确认</el-button>
        <el-button>取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { addTruck, enableTruck, getAllTruckType, getBindDrivers, getTruckCount, initTruckList, stopTruck } from '@/api/transit'
import setMap from '@/constant/setMap'
export default {
  data() {
    return {
      setMap,
      page: {
        page: 1,
        pageSize: 10
      },
      counts: 0,
      statusCount: {},
      truckList: [],
      TruckTypeList: [],
      truckForm: {
        truckTypeId: '',
        licensePlate: '',
        deviceGpsId: ''
      },
      searchContent: {
        truckTypeId: null,
        licensePlate: null
      },
      workStatus: null,
      rules: {
        truckTypeId: [{ required: true, message: '不能为空', trigger: 'blur' }],
        licensePlate: [{ required: true, message: '不能为空', trigger: 'blur' }],
        deviceGpsId: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      loading: false,
      showDialog: false,
      showDriver: false,
      driverInfo: {},
      driverList: [],
      driverSelect: []
    }
  },
  computed: {
    tableList() {
      return this.driverList.filter(item => this.driverSelect.includes(item.id))
    }
  },
  created() {
    this.getTruckList()
    this.getTruckStatusCount()
    this.getTruckTypeList()
  },
  methods: {
    // 车辆列表
    async getTruckList() {
      this.loading = true
      try {
        const res = await initTruckList({ ...this.page, ...this.searchContent, workStatus: this.workStatus })
        // console.log(res)
        this.truckList = res.items
        this.counts = +res.counts
      } catch (error) {
        this.loading = false
      }
      this.loading = false
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTruckList()
    },
    handleCurrentChange(val) {
      this.page.page = val
      this.getTruckList()
    },
    // 车辆状态
    async getTruckStatusCount() {
      this.statusCount = await getTruckCount()
    },
    // 所有车辆类型
    async getTruckTypeList() {
      this.TruckTypeList = await getAllTruckType()
    },
    // 切换
    changeItem(id) {
      this.workStatus = id
      this.getTruckList()
    },
    // 新增弹层
    handleDialog() {
      this.showDialog = true
    },
    // 提交
    async submit() {
      await this.$refs.truckForm.validate()
      await addTruck(this.truckForm)
      this.getTruckList()
      this.close()
    },
    // 搜索车辆类型
    async search() {
      this.getTruckList()
    },
    // 重置
    reset() {
      this.searchContent = {
        truckTypeId: null,
        licensePlate: null
      }
      this.getTruckList()
    },
    close() {
      this.truckForm = {
        truckTypeName: '',
        licensePlate: '',
        deviceGpsId: ''
      }
      this.$refs.truckForm.resetFields()
      this.showDialog = false
    },
    // 跳转详情页
    toDetail(id) {
      // console.log(this.$route)
      this.$router.push({
        path: '/transit/vehicle-detail',
        query: {
          id,
          formUrlName: this.$route.meta.title
        }
      })
    },
    // 启用和停用
    isEnable(row) {
      const h = this.$createElement
      this.$msgbox({
        title: row.workStatus ? '车辆停用' : '车辆启用',
        message: h('p', null, [
          h('p', null, '确定要启用吗？车辆启用需满足以下条件:'),
          h('div', { style: 'display: flex;' }, [
            h('span', { style: 'flex:1' }, '车辆信息已完善'),
            h('span', { style: 'flex:1' }, '绑定司机>=2,且有排班')
          ])
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        if (row.workStatus) {
          await stopTruck(row.id)
        } else {
          await enableTruck(row.id)
        }
      })
    },
    // 配置司机
    withDriver(row) {
      const h = this.$createElement
      this.$msgbox({
        title: '车辆配置',
        message: h('p', null, [
          h('p', null, '确定要启用吗？车辆启用需满足以下条件:'),
          h('div', { style: 'display: flex;' }, [
            h('span', { style: 'flex:1' }, '车辆信息已完善'),
            h('span', { style: 'flex:1' }, '车辆无未完成运输任务')
          ])
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        this.driverInfo = row
        this.driverList = await getBindDrivers(row.id)
        this.driverSelect = this.driverList.map(item => item.id)
        this.showDriver = true
      })
    },
    // 查看司机
    driverView(id) {
      // this.$router.push()
    }
  }
}
</script>

<style lang="scss" scoped>
.vehicle{
  ::v-deep .el-dialog{
    width: 600px;
    border-radius: 8px;
    .el-dialog__header {
      border-radius: 8px;
      background-color: #f3f4f7;
      span{
        color: #000;
      }
    }
    .el-dialog__body {
      padding-right: 60px;
    }
  }
}
.green-status::before{
    content: "";
    width: 6px;
    height: 6px;
    background: #1dc779;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.red-status::before{
    content: "";
    width: 6px;
    height: 6px;
    background: red;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.truckInfo{
  .el-col{
    margin: 6px 0;
  }
}
.statusGreen{
   display: inline-block;
    text-align: center;
    width: 41px;
    border-radius: 13.5px;
    color: #fff;
   background-color: #37c608;
}
</style>
